{{ define "js" }}
{{ end }}

{{ define "css" }}
  <style>
    .epoch__container {
      position: relative;
      display: flex;
      padding: 0 1rem;
      justify-content: space-between;
      align-items: center;
      flex-direction: row !important;
      padding: 0.5rem 1rem;
      margin: 1rem auto;
    }

    .epoch__container > a,
    .epoch__container > div {
      position: relative;
      margin: 0 1rem;
      border-radius: 5px;
      box-shadow: inset 1px 1px 2px var(--shadow-light), inset -1px -1px 2px var(--shadow-light);
      flex: 1 1 30px;
      max-width: 80px;
    }

    .epoch__container > a:hover {
      transition: background 0.25s ease;
      background: var(--linear-gradient) !important;
    }

    .epoch__container > a > div,
    .epoch__container > div {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      color: var(--font-color);
    }

    .epoch__container img {
      width: 30px;
      height: 30px;
    }

    .epoch__current {
      font-size: 1.2rem;
      border-radius: 5px;
      background: var(--linear-gradient);
    }

    .epoch__current img {
      width: 40px !important;
      height: 40px !important;
    }

    .epoch__next .epoch__next-loading {
      position: relative;
    }

    .epoch__next-loading::after {
      position: absolute;
      content: "...";
      animation: dots 3s linear infinite;
      left: 50%;
      transform: translateX(-50%);
    }

    @keyframes dots {
      0% {
        content: "..";
      }
      20% {
        content: ".";
      }
      40% {
        content: "";
      }
      60% {
        content: ".";
      }
      80% {
        content: "..";
      }
      100% {
        content: "...";
      }
    }
  </style>
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="my-3">
        <div class="d-md-flex py-2 justify-content-md-between">
          <h1 class="h4 mb-1 mb-md-0">
            <!-- {{ if or (gt .PreviousEpoch 0) (eq .Epoch 1) }}
              <a href="/epoch/{{ .PreviousEpoch }}"><i class="fa fa-chevron-left"></i></a>
            {{ end }} -->
            <span class="ml-1 mr-1"><i class="fas fa-history mr-2"></i>Epoch Details</span>
            <!-- {{ if gt .NextEpoch 0 }}
              <a href="/epoch/{{ .NextEpoch }}"><i class="fa fa-chevron-right"></i></a>
            {{ end }} -->
          </h1>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb font-size-1 mb-0" style="padding: 0; background-color: transparent;">
              <li class="breadcrumb-item"><a href="/" title="Home">Home</a></li>
              <li class="breadcrumb-item"><a href="/epochs" title="Epochs">Epochs</a></li>
              <li class="breadcrumb-item active" aria-current="page">Epoch Details</li>
            </ol>
          </nav>
        </div>
      </div>
      <div class="epoch__container card card-header">
        <a href="/epoch/{{ .PreviousEpoch }}">
          <div class="epoch__pervious">
            <img src="/img/apps.png" alt="" />
            <span class="epoch__next-loading">&nbsp;</span>
          </div>
        </a>
        <i class="fas fa-arrow-left"></i>
        <div class="epoch__current">
          <img src="/img/apps.png" alt="" />
          <span>{{ formatAddCommas .Epoch }}</span>
        </div>
        <i class="fas fa-arrow-right"></i>
        <a href="/epoch/{{ .NextEpoch }}">
          <div class="epoch__next">
            <img src="/img/apps.png" alt="" />
            <span class="epoch__next-loading">&nbsp;</span>
          </div>
        </a>
      </div>
      <div class="card">
        <div class="card-body px-0 py-1">
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Epoch:</div>
            <div class="col-md-9">{{ formatAddCommas .Epoch }}</div>
          </div>
          <div class="row border-bottom p-3 mx-0">
            <div class="col-md-3">Time:</div>
            <div class="col-md-9 d-flex justify-between flex-wrap">
              {{ template "timestamp" .Ts }}
            </div>
          </div>
        </div>
      </div>

      <div id="epoch-blocks" class="card my-3 py-0 collapse show">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th>Slot</th>
                </tr>
              </thead>
              <tbody>
                {{ range .Blocks }}
                  <tr>
                    <td><a href="/slot/{{ .Slot }}">{{ formatAddCommas .Slot }}</a></td>
                  </tr>
                {{ end }}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
